<template>
    <div>
      <!-- 头部 -->
      <div class="mui-bar mui-bar-nav">
          <h1 class="mui-title">我的监考</h1>
      </div>	
      <!-- 日期 与 安排-->
        <el-tabs style="padding-top: 55px;" v-model="activeName" :stretch="true">
          <el-tab-pane label="周一" name="1">
            <arrange @sendparent="getCourseInfo" :list="list[0]" v-if="loadAll === 2"></arrange>
          </el-tab-pane>
          <el-tab-pane label="周二" name="2">
            <arrange @sendparent="getCourseInfo" :list="list[1]" v-if="loadAll === 2"></arrange>
          </el-tab-pane>
          <el-tab-pane label="周三" name="3">
            <arrange @sendparent="getCourseInfo" :list="list[2]" v-if="loadAll === 2"></arrange>
          </el-tab-pane>
          <el-tab-pane label="周四" name="4">
            <arrange @sendparent="getCourseInfo" :list="list[3]" v-if="loadAll === 2"></arrange>
          </el-tab-pane>
          <el-tab-pane label="周五" name="5">
            <arrange @sendparent="getCourseInfo" :list="list[4]" v-if="loadAll === 2"></arrange>
          </el-tab-pane>
          <el-tab-pane label="周六" name="6">
            <arrange @sendparent="getCourseInfo" :list="list[5]" v-if="loadAll === 2"></arrange>
          </el-tab-pane>
          <el-tab-pane label="周日" name="7">
            <arrange @sendparent="getCourseInfo" :list="list[6]" v-if="loadAll === 2"></arrange>
          </el-tab-pane>
        </el-tabs>
      <!-- 遮罩层 -->
      <el-dialog :visible.sync="mask" width="90%" >
        <div class="demoTwo">
            <ul >
              <li class="li_warpper">
                <span >考试科目：</span>
                <span class="content">{{ data.name }}</span>
              </li>
              <li class="li_warpper">
                <span>考场分布：</span>
                <span class="content">{{ data.address }}</span>
              </li>
              <li class="li_warpper">
                <span>考试时间：</span>
                <span class="content">{{ data.date}}</span>
              </li>
              <li class="li_warpper">
                <span>起始时间：</span>
                <span class="content">{{ data.startTime }} ~ {{data.endTime}}</span>
              </li>
              <li class="li_warpper">
                <span>学生人数：</span>
                <span class="content">{{ data.studentNum }} 人</span>
              </li>
              <li class="li_warpper">
                <span>监考老师：</span>
                <span class="content" v-for="i in data.teachers" :key="i.workId">{{ i.name }} &nbsp;</span>
              </li>
            </ul>
        </div>
      </el-dialog>
      <!-- 底部导航条 -->
      <tabbar :num="num"></tabbar>
    </div>
</template>

<script>
import Arrange from '../others/arrange.vue'
import {host} from "../../network";
import axios from 'axios'
import Qs from 'qs';
import Tabbar from './tabbar.vue';

export default {
  name: "index",
  components: {
    Arrange,
    Tabbar,
  },
  data() {
    return {
        activeName: '1',
        loadAll: 0,
        mask: false,
        courseLsit: [],
        list: [[],[],[],[],[],[],[]],
        num: 0,
        data :{},
    }
  },
  created() {
    // 判断是星期几
    this.getTheDay();
    // 判断是否登录
    if( !localStorage.token ) {
      this.$notify({
        title: '',
        message: '请先登录..',
        type: 'warning'
      });
      this.$router.push({path:'/myinfo'});
    } else {
      this.getDayOfIt();
      this.num = (Number)(localStorage.num);
    }
    
  },
  methods: {
    // 判断是星期几
    getTheDay() {
        var weekDay = ["1", "2", "3", "4", "5", "6", "7"];  
        var date = new Date();
        this.activeName = weekDay[date.getDay()-1];
    },
    
    // 子组件传值过来
    getCourseInfo(examCode) {
        axios.get(host.ip+'/teacher/exam' ,{
            headers: {
                'token': localStorage.token
            },
            params: {
                examCode: examCode
            }
        }).then(suc => {
            if (suc.data.code === 0) {
                this.data = suc.data.data;
                this.mask=true;
            } else{
              console.log(fail);
              this.$notify({
                title: '',
                message: suc.data.msg,
                type: 'error'
              });
            }
        })
    },
    // 获取每一天的课程
    getEveryday() {
        this.list = [[],[],[],[],[],[],[]];
        // console.log(this.list);
        for( var i = 0; i < this.courseLsit.length; i++) {
            let dateArray = this.courseLsit[i].date.split("-");
            let date = new Date(dateArray[0], dateArray[1] - 1, dateArray[2])
            let day = (Number)(date.getDay());
            this.list[day].push(this.courseLsit[i]);
        }
        // console.log(this.list);
        this.loadAll++;
    },
    // 获取这一周的所有
    getDayOfIt() {
      let token = localStorage.token;
      // 没有完成的监考
      axios.get(host.ip + "/teacher/unfinished", {
           headers: {
              'token': token
            },
            responseType: 'json',
       })
       .then( suc => {
          if (suc.data.code === 0) {
              this.courseLsit = suc.data.data;
              // console.log(this.courseLsit);
              this.loadAll++;
              this.getEveryday();
              localStorage.num = this.courseLsit.length;
          } else {
              this.$notify({
                title: '',
                message: suc.data.msg,
                type: 'error'
              });
          }
       })
       .catch( fail => {
         console.log(fail);
          this.$notify({
              title: '',
              message: '出错了..',
              type: 'error'
            });
       })
    }
  }
}

</script>


<style>
.is-top {
    margin-bottom: 0px;
}
.el-tabs__item {
    padding: 0 10px;
}
.li_warpper {
  height: 40px;
  line-height: 40px;
}
.li_warpper .content{
  color: #00BFFF;
}
.ivu-tabs {
    /* height: 50px; */
    margin-top: 15px;
}
.ivu-tabs:after {
    background: #848484;
}
.not_today {
    width: 10%;
    height: 50px;
    line-height: 50px;
    text-align: center; 
    background: #F2F2F2;
    border-radius: 8px;
}
.not_today span {
    font-size: 15px;
    color: #848484;
    display: block;
    height: 50%;
    margin-top: -6px;;
}
.today {
    width: 10%;
    height: 50px;
    line-height: 50px;
    text-align: center; 
    border-radius: 8px;
    background: #2E9AFE;
}
.today span {
    color: white;
}
.list-crapper {
    width: 100%;
    height: 80px;
    line-height: 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.list-item {
    width: 10%;
    height: 50px;
    line-height: 50px;
    text-align: center; 
    background: #F2F2F2;
    border-radius: 8px;
}
.list-item span {
    font-size: 15px;
    color: #848484;
    display: block;
    height: 50%;
    margin-top: -6px;;
}

.time{
    display: flex;
    margin-left: 10px;
    margin-top: 15px;
}
h1 {
    font-size: 18px;
    margin: 5px 5px;
    color: #6E6E6E;
}

/* .mint-swipe .mint-swipe-item:nth-child(1) {
  background-image: url('../../images/back1.png');
  background-size: 375px 200px ;
}
.mint-swipe .mint-swipe-item:nth-child(2) {
   background-image: url('../../images/back2.png');
  background-size: 375px 200px ;
}
.mint-swipe .mint-swipe-item:nth-child(3) {
   background-image: url('../../images/back3.png');
  background-size: 375px 200px ;
} */
</style>